<template>
    <div class="bg-white goods_create" style="margin: -20px; margin-top:-1rem; margin-bottom: 0!important;">
        <router-link :to="{ path: './list' }" style="position: absolute;top: 12px;left: 200px;">
            <el-button size="mini">回到商品列表</el-button>
        </router-link>
        <div class="p-3">
            <tinymce-editor v-model="content" @onClick="onClick" toolbar="imageUpload"></tinymce-editor>
        </div>
        <el-button text="primary" style="position: fixed; bottom: 50px; right: 50px;" @click="submit">
            提交
        </el-button>
    </div>
</template>
<script>
import TinymceEditor from '@/components/common/tinymce-editor.vue'

export default {
    name: "goodsContent",
    inject: ['app', 'layout'],
    components: { TinymceEditor },
    data() {
        return {
            content: '',
            id: 0, //当前操作商品的id
        }
    },
    // 测试是否vuex能够访问skus_type
    mounted() {

    },
    created() {
        this.id = this.$route.params.id
        if (!this.id) {
            this.$message.error('非法参数')
            return this.$router.push({
                name: 'shop-goods-list'
            })
        }
        this.layout.showLoading()
        // 获取之前的商品详情
        this.$axios.get('/admin/goods/read/' + this.id, { token: true }).then((res) => {
            let data = res.data.data
            this.content = data.content
            this.layout.hideLoading()
        }).catch(() => {
            this.layout.hideLoading()
        })

    },
    methods: {
        // 用来加载数据，监听点的是哪一个tab
        onClick(tab) {
            console.log(tab.label + '页');
        },
        submit() {
            this.layout.showLoading()
            this.$axios.post('/admin/goods/' + this.id, {
                content: this.content
            }, {
                token: true
            }).then(() => {
                this.layout.hideLoading()
                this.$message.success('成功')
                this.$router.push({
                    name: 'shop-goods-list'
                })
            }).catch(() => {
                this.layout.hideLoading()
            })
        }
    }
}

</script>
<style>
.goods_create .el-form-item {
    margin-bottom: 10px;
}
</style>